<template>
	<view class="messagelist bg-white p-4">
		<!-- 消息列表 -->
		<view v-if="activeName != ''" class="">
			<el-button @click="back" type="primary">{{
        activeName == "first" ? "返回我的采购" : "返回我的寄售"
      }}</el-button>
		</view>
		<el-tabs v-model="activeName1" @tab-click="handleClick">
			<el-tab-pane label="我的采购信息" name="first">
				<el-table :data="tableData" border :header-cell-style="{ 'text-align': 'center' }"
					:cell-style="{ 'text-align': 'center' }">
					<el-table-column type="index" width="50"> </el-table-column>
					<el-table-column prop="Group_Seek_Transaction_SerialNumber" label="交易流水号"></el-table-column>
					<el-table-column prop="Cause" label="说明"></el-table-column>
					<el-table-column prop="Submission_Time" label="申请时间"></el-table-column>
					<el-table-column prop="Row_Status" label="状态">
						<template v-slot="{ row }">
							<text v-if="row.Row_Status == 0">未读</text>
							<text v-if="row.Row_Status == 1">已读</text>
						</template>
					</el-table-column>
					<el-table-column prop="Enterprise_Name" label="对方企业">
						<template v-slot="{ row }">
							<el-tooltip effect="dark" :content="row.Enterprise_Name" placement="top">
								<view class="text-ellipsis w-100">
									<text>{{ row.Enterprise_Name }}</text>
								</view>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="操作" class="table_foot" width="160" align="center">
						<template v-slot="{ row }">
							<view class="flex ">
								<el-button :loading="loading" v-if="row.Row_Status != '1'"
									@click="EditAction('1', row.Group_Seek_Message_SerialNumber, 0)" size="mini"
									type="primary" >已读</el-button>
								<el-button :loading="loading" v-if="row.Row_Status != '2'"
									@click="EditAction('2', row.Group_Seek_Message_SerialNumber, 0)" size="mini"
									type="danger">删除</el-button>
							</view>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="我的供应信息" name="second">
				<el-table :data="tableData" border :header-cell-style="{ 'text-align': 'center' }"
					:cell-style="{ 'text-align': 'center' }">
					<el-table-column type="index" width="50"> </el-table-column>
					<el-table-column prop="Group_Transaction_SerialNumber" label="交易流水号"></el-table-column>
					<el-table-column prop="Cause" label="说明"></el-table-column>
					<el-table-column prop="Submission_Time" label="申请时间"></el-table-column>
					<el-table-column prop="Row_Status" label="状态">
						<template v-slot="{ row }">
							<text v-if="row.Row_Status == 0">未读</text>
							<text v-if="row.Row_Status == 1">已读</text>
						</template>
					</el-table-column>
					<el-table-column prop="Enterprise_Name" label="对方企业">
						<template v-slot="{ row }">
							<el-tooltip effect="dark" :content="row.Enterprise_Name" placement="top">
								<view class="text-ellipsis w-100">
									<text>{{ row.Enterprise_Name }}</text>
								</view>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="操作" class="table_foot" width="160" align="center">
						<template v-slot="{ row }">
							<view class="flex justify-center">
								<el-button v-if="row.Row_Status != '1'" :loading="loading" @click="
                    EditAction('1', row.Group_Message_SerialNumber, 1)
                  " size="mini" type="primary">已读</el-button>
								<el-button v-if="row.Row_Status != '2'" :loading="loading" @click="
                    EditAction('2', row.Group_Message_SerialNumber, 1)
                  " size="mini" type="danger">删除</el-button>
							</view>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<!-- <el-tab-pane label="系统信息" name="third"></el-tab-pane> -->
		</el-tabs>
		<view v-if="total != 0" class="flex py-2" style="justify-content: space-between">
			<view class=""> </view>
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="form.page" :page-sizes="[3, 5, 10, 20]" :page-size="form.limit"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</view>
		<view class="foot2">
			<el-radio-group @change="Radiochange" v-model="form.Row_Status">
				<el-radio :label="'0'">未读消息</el-radio>
				<el-radio :label="''">全部消息</el-radio>
			</el-radio-group>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import {
		getGroupMessageAllAction,
		getGroupSeekMessageAllAction,
	} from "@/api/group.js";
	import {
		GoodsFileInquiry,
		getInquiryIDOriginal,
		getEditAction,
	} from "@/api/global.js";
	import {
		Message
	} from "element-ui";
	export default {
		data() {
			return {
				loading: false,
				active: 0,
				tableData: [], // 表格数据
				total: 0, // 总数
				form: {
					hotspot: "0", //0是消息1消息提示
					Type: "1", //1是自己0是全部
					Row_Status: "", //空是全部0是未读1是已读2是删除
					token: uni.getStorageSync("loginInfo").token,
					Enterprise_Info_SerialNumber: uni.getStorageSync("loginInfo").enterprise,
					page: 1, //页数
					limit: 5, //每页数据条数
				},
				activeName1: "first",
			};
		},
		props: {
			activeName: {
				type: String,
				default: "",
			},
		},
		mounted() {
			//初始化
			if (this.activeName != "") {
				this.activeName1 = this.activeName;
				if (this.activeName == "first") {
					this.form.Row_Status = "";
					this.getList1(this.form);
				} else {
					this.form.Row_Status = "";
					this.getList(this.form);
				}
			} else {
				this.getList1(this.form);
			}
		},
		methods: {
			Radiochange(e) {
				if (this.active == 0) {
					this.form.page = 1;
					this.getList1(this.form);
				} else {
					this.form.page = 1;
					this.getList(this.form);
				}
			},
			handleClick(tab, event) {
				console.log(tab.index);
				if (tab.index == 0) {
					this.form.page = 1;
					this.form.Row_Status = "";
					this.getList1(this.form);
				} else {
					this.form.page = 1;
					this.form.Row_Status = "";
					this.getList(this.form);
				}
			},
			async getList(data) { //供应商消息
				const res = await getGroupMessageAllAction({
					data,
				});
				if (res.redirect && res.redirect == "REDIRECT") {
					uni.navigateTo({
						url: "/pages/login/login",
					});
				} else if (res.Status == "success") {
					console.log(res);
					this.tableData = res.tableData;
					this.total = Number(res.limit);
				}
			},
			async getList1(data) {
				const res = await getGroupSeekMessageAllAction({
					data,
				});
				if (res.redirect && res.redirect == "REDIRECT") {
					uni.navigateTo({
						url: "/pages/login/login",
					});
				} else if (res.Status == "success") {
					console.log(res);
					this.tableData = res.tableData;
					this.total = Number(res.limit);
				}
			},
			async EditAction(Row_Status, SerialNumber, i) {
				console.log(Row_Status, SerialNumber, i);
				//   this.loading = true;
				let data;
				let Data;
				let message;
				if (i == 0) {
					data = {
						Primary_Key_Name: "Group_Seek_Message_SerialNumber", //主键名
						Primary_Key: SerialNumber, //主键值
						Data: "group_seek_message",
						token: uni.getStorageSync("loginInfo").token,
					};
				} else {
					data = {
						Primary_Key_Name: "Group_Message_SerialNumber", //主键名
						Primary_Key: SerialNumber, //主键值
						Data: "group_message",
						token: uni.getStorageSync("loginInfo").token,
					};
				}
				const res = await getInquiryIDOriginal({
					data,
				});
				if (res.redirect && res.redirect == "REDIRECT") {
					uni.navigateTo({
						url: "/pages/login/login",
					});
				}
				console.log(res);
				console.log(Row_Status);
				res[0].Row_Status = Row_Status;
				if (Row_Status == "1") {
					message = "已读取消息";
				} else if (Row_Status == "2") {
					message = "已删除消息";
				}
				if (i == 0) {
					Data = {
						Data: JSON.stringify({
							Modify: {
								group_seek_message: res,
							},
						}),
						token: uni.getStorageSync("loginInfo").token,
					};
				} else {
					Data = {
						Data: JSON.stringify({
							Modify: {
								group_message: res,
							},
						}),
						token: uni.getStorageSync("loginInfo").token,
					};
				}
				console.log(res);
				this.getEdit(Data, message, i);
			},

			async getEdit(data, message, i) {
				const res = await getEditAction({
					data,
				});
				this.loading = false;
				if (res.redirect && res.redirect == "REDIRECT") {
					uni.navigateTo({
						url: "/pages/login/login",
					});
				} else if (res.Status == "success") {
					console.log(res);
					Message({
						type: "success",
						message,
					});
					if (i == 0) {
						this.getList1(this.form);
					} else {
						this.getList(this.form);
					}
				}
			},
			markAsRead(index) {
				// 将对应索引的数据标记为已读
				this.tableData[index].status = "已读";
			},
			deleteItem(index) {
				// 删除对应索引的数据
				this.tableData.splice(index, 1);
			},
			handleCurrentChange(e) {
				this.form.page = e;
				this.getList(this.form);
			},
			handleSizeChange(e) {
				this.form.page = 1;
				this.form.limit = e;
				this.getList(this.form);
			},
			back() {
				if (this.activeName == "first") {
					this.$emit("Black", 6);
				} else {
					this.$emit("Black", 7);
				}
			},
		},
		created() {
			this.total = this.tableData.length;
		},
	};
</script>

<style lang="scss" scoped>
	.messagelist {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		position: relative;

		.table_foot {
			display: flex;
		}

		.foot {
			display: flex;
			justify-content: flex-end;

			/deep/ .btn-prev {
				border: none;
			}

			/deep/ .btn-next {
				border: none;
			}
		}

		.foot2 {
			position: absolute;
			top: 30px;
			right: 20px;
		}
	}
</style>